
<template>
    <div class="text-center">
        <span>总题数:{{ totalQuestion || 0 }}道</span>
        <div style="margin: 0px;display:grid;gap:5px 10px;grid-template-columns:1fr 1fr ">
            <span v-if="scope.typeAmountConf.single">单选题:{{ scope.typeAmountConf.single || 0 }}道</span>
            <span v-if="scope.typeAmountConf.multiple">多选题:{{ scope.typeAmountConf.multiple || 0 }}道</span>
            <span v-if="scope.typeAmountConf.judge">判断题:{{ scope.typeAmountConf.judge || 0 }}道</span>
            <span v-if="scope.typeAmountConf.case">案例题:{{ scope.typeAmountConf.case || 0 }}组</span>
            <span v-if="scope.typeAmountConf.fillBlank">填空题:{{ scope.typeAmountConf.fillBlank || 0 }}组</span>
            <span v-if="scope.typeAmountConf.shortAnswer">简答题:{{ scope.typeAmountConf.shortAnswer || 0 }}组</span>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue'
const props = defineProps({ scope: { default: '' } })
let totalQuestion = computed( () => {
    let total = 0;
    if (!props.scope.typeAmountConf) { return }
    for (const key in props.scope.typeAmountConf) {
        if (props.scope.typeAmountConf[key]) {
            total += props.scope.typeAmountConf[key];
        }
    }
    if (props.scope.typeAmountConf.case) {
        total += (props.scope.typeAmountConf.case * props.scope.caseGroupSize - props.scope.typeAmountConf.case)
    }
    return total
})

// let totalQuestion = ref(0)
// onMounted(() => {
//     if (!props.scope.typeAmountConf) { return }
//     console.log(props.scope.typeAmountConf);
//     for (const key in props.scope.typeAmountConf) {
//         if (props.scope.typeAmountConf[key]) {
//             totalQuestion.value += props.scope.typeAmountConf[key];
//         }
//     }

//     // console.log(props, 'props')
// })
</script>